extends ../_layout

block active
  - sidebar_active = 'search.html'

block content
  h3 Search
    small Search and filter results

  .row
    .col-lg-9
      .form-group.mb-xl
        input.form-control.mb(type='text', placeholder="Search products, people, apps, etc.")
        .clearfix
          button.pull-left.btn.btn-default(type="button") Search
          .pull-right
            label.checkbox-inline.c-checkbox
              input#inlineCheckbox10(type='checkbox', value='option1')
              span.fa.fa-check
              |  Products
            label.checkbox-inline.c-checkbox
              input#inlineCheckbox20(type='checkbox', value='option2')
              span.fa.fa-check
              |  People
            label.checkbox-inline.c-checkbox
              input#inlineCheckbox30(type='checkbox', value='option3')
              span.fa.fa-check
              |  Apps

      // START panel
      .panel.panel-default
        .panel-heading
          a(href="#", data-tool="panel-refresh", data-toggle="tooltip", title="Refresh Panel").pull-right
            em.fa.fa-refresh
          | Search Results
        // START table-responsive
        .table-responsive
          table.table.table-striped.table-bordered.table-hover
            thead
              tr
                th(data-check-all="")
                  .checkbox.c-checkbox(data-toggle="tooltip",data-title="Check All")
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                th Description
            tbody
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td
                  .media-box
                      a.pull-left(href='#')
                        img.media-box-object.img-responsive.img-rounded.thumb64(src="img/dummy.png", alt="")
                      .media-box-body
                        .pull-right.btn.btn-info.btn-sm View
                        h4.media-box-heading Product 1
                        small.text-muted Category1, Category2 
                        p Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan. 

              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td
                  .media-box
                      a.pull-left(href='#')
                        img.media-box-object.img-responsive.img-rounded.thumb64(src="img/dummy.png", alt="")
                      .media-box-body
                        .pull-right.btn.btn-info.btn-sm View
                        h4.media-box-heading Product 2
                        small.text-muted Category1, Category2 
                        p Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan. 
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td
                  .media-box
                      a.pull-left(href='#')
                        img.media-box-object.img-responsive.img-rounded.thumb64(src="img/dummy.png", alt="")
                      .media-box-body
                        .pull-right.btn.btn-info.btn-sm View
                        h4.media-box-heading Product 3
                        small.text-muted Category1, Category2 
                        p Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan. 
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td
                  .media-box
                      a.pull-left(href='#')
                        img.media-box-object.img-responsive.img-rounded.thumb64(src="img/dummy.png", alt="")
                      .media-box-body
                        .pull-right.btn.btn-info.btn-sm View
                        h4.media-box-heading Product 4
                        small.text-muted Category1, Category2 
                        p Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan. 
              tr
                td
                  .checkbox.c-checkbox
                    label
                      input(type='checkbox')
                      span.fa.fa-check
                td
                  .media-box
                      a.pull-left(href='#')
                        img.media-box-object.img-responsive.img-rounded.thumb64(src="img/dummy.png", alt="")
                      .media-box-body
                        .pull-right.btn.btn-info.btn-sm View
                        h4.media-box-heading Product 5
                        small.text-muted Category1, Category2 
                        p Sed gravida auctor odio. Sed viverra rutrum hendrerit. Praesent dapibus justo dolor. Suspendisse rhoncus consectetur eros vehicula accumsan. 


        // END table-responsive
        .panel-footer
          .row
            .col-lg-2
              button.btn.btn-sm.btn-default Clear
            .col-lg-8
            .col-lg-2.text-right
              ul.pagination.pagination-sm
                li.active: a(href='#') 1
                li: a(href='#') 2
                li: a(href='#') 3
                li: a(href='#') »
      // END panel

    .col-lg-3
      h3.m0.pb-lg Filters

      .form-group.mb-xl
        label.control-label.mb by Text
        br
        select.chosen-select.input-md.form-control
          //- option(value='')
          optgroup(label='NFC EAST')
            option Dallas Cowboys
            option New York Giants
            option Philadelphia Eagles
            option Washington Redskins
          optgroup(label='NFC NORTH')
            option Chicago Bears
            option Detroit Lions
            option Green Bay Packers
            option Minnesota Vikings
          optgroup(label='NFC SOUTH')
            option Atlanta Falcons
            option Carolina Panthers
            option New Orleans Saints
            option Tampa Bay Buccaneers
          optgroup(label='NFC WEST')
            option Arizona Cardinals
            option St. Louis Rams
            option San Francisco 49ers
            option Seattle Seahawks
          optgroup(label='AFC EAST')
            option Buffalo Bills
            option Miami Dolphins
            option New England Patriots
            option New York Jets
          optgroup(label='AFC NORTH')
            option Baltimore Ravens
            option Cincinnati Bengals
            option Cleveland Browns
            option Pittsburgh Steelers
          optgroup(label='AFC SOUTH')
            option Houston Texans
            option Indianapolis Colts
            option Jacksonville Jaguars
            option Tennessee Titans
          optgroup(label='AFC WEST')
            option Denver Broncos
            option Kansas City Chiefs
            option Oakland Raiders
            option San Diego Chargers

      .form-group
        label.control-label.mb by Date
        br
        p#datetimepicker.input-group.date
          input.form-control(type='text')
          span.input-group-addon
            span.fa.fa-calendar

      .form-group.mb-xl
        label.control-label.mb by Range
        br
        input#sl2.slider(data-ui-slider="", type='text', value='', data-slider-min='10', data-slider-max='1000', data-slider-step='5', data-slider-value='[250,750]')

      button.btn.btn-default.btn-lg Apply

block vendor_css
  // SLIDER CTRL
  link(rel='stylesheet', href='../vendor/seiyria-bootstrap-slider/dist/css/bootstrap-slider.min.css')
  // CHOSEN
  link(rel='stylesheet', href='../vendor/chosen_v1.2.0/chosen.min.css')
  // DATETIMEPICKER
  link(rel='stylesheet', href='../vendor/eonasdan-bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.min.css')
block vendor_js
  // CHOSEN
  script(src='../vendor/chosen_v1.2.0/chosen.jquery.min.js')
  // SLIDER CTRL
  script(src='../vendor/seiyria-bootstrap-slider/dist/bootstrap-slider.min.js')
  // MOMENT JS
  script(src='../vendor/moment/min/moment-with-locales.min.js')
  // DATETIMEPICKER
  script(type='text/javascript', src='../vendor/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js')
  // Demo
  script(src='js/demo/demo-search.js')
